<script setup>
import api from '../api/seat_api.js'
import { ref, onMounted } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import lodash from 'lodash'

// 表格数据与分页
const tableData = ref([])
const total = ref(0);

// 对话框状态
const editWinVisible = ref(false);
const addWinVisible = ref(false);

// 查询参数
const searchObj = ref({
  current: 1,
  limit: 10,
  matchId: '',
  name: '',
  price: '',
  status: ''
});

// 表单数据
const obj = ref({});
const addFormRef = ref(null);
const editFormRef = ref(null);

// 数据加载
const search = async () => {
  try {
    const result = await api.page(searchObj.value);
    tableData.value = result.records;
    total.value = result.total;
  } catch (err) {
    ElMessage.error('数据加载失败');
  }
};
onMounted(() => {
  search();
});

// 分页与查询
const handleSizeChange = () => search();
const handleCurrentChange = () => search();
const handlerSearch = () => {
  searchObj.value.current = 1;
  search();
};

// 新增操作
const handleAdd = async () => {
  obj.value = { status: 0 };  // 默认状态为0
  addWinVisible.value = true;
};

const addCommit = async () => {
  try {
    await api.add(obj.value);
    ElMessage.success('新增成功');
    addWinVisible.value = false;
    search();
    obj.value = {};
  } catch (err) {
    ElMessage.error(err.message || '新增失败');
  }
};

// 编辑操作
const handleEdit = async (_, row) => {
  obj.value = lodash.clone(row);
  editWinVisible.value = true;
};

const editCommit = async () => {
  try {
    await api.edit(obj.value);
    ElMessage.success('编辑成功');
    editWinVisible.value = false;
    search();
  } catch (err) {
    ElMessage.error(err.message || '编辑失败');
  }
};

// 删除操作
const handleDelete = (_, row) => {
  ElMessageBox.confirm(
      '确认删除该行数据吗？',
      '删除提示',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'error',
      }
  ).then(async () => {
    try {
      await api.del(row.id);
      ElMessage.success('删除成功');
      search();
    } catch (err) {
      ElMessage.error('删除失败');
    }
  }).catch(() => {});
};

// 取消操作
const editCancel = () => {
  obj.value = {};
  editWinVisible.value = false;
};
const addCancel = () => {
  obj.value = {};
  addWinVisible.value = false;
};

// 状态文本转换方法
const getStatusName = (status) => {
  switch(status) {
    case 0: return '正常';
    case 1: return '禁用';
    default: return '未知状态';
  }
};
</script>

<template>
  <el-form :inline="true" :model="searchObj" class="demo-form-inline" style="margin-top:10px ">
    <el-form-item label="赛事ID">
      <el-input v-model="searchObj.matchId" placeholder="请输入赛事ID" clearable type="number"/>
    </el-form-item>
    <el-form-item label="座位类型">
      <el-input v-model="searchObj.name" placeholder="请输入座位类型名称" clearable />
    </el-form-item>
    <el-form-item label="价格">
      <el-input v-model="searchObj.price" placeholder="请输入价格" clearable type="number"/>
    </el-form-item>
    <el-form-item label="状态">
      <el-select v-model="searchObj.status" placeholder="请选择状态" clearable style="width: 180px">
        <el-option label="正常" value="0" />
        <el-option label="禁用" value="1" />
      </el-select>
    </el-form-item>
  </el-form>

  <el-form :inline="true">
    <el-form-item>
      <el-button type="primary" @click="handlerSearch">查询</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleAdd">新增</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="id" width="80">
      <template #default="scope">
        <el-tag>{{ scope.row.id }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="赛事ID" width="100">
      <template #default="scope">
        <el-tag>{{ scope.row.matchId }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="座位类型" width="120">
      <template #default="scope">
        <el-tag>{{ scope.row.name }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="价格" width="100">
      <template #default="scope">
        <el-tag>{{ scope.row.price }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="总数量" width="100">
      <template #default="scope">
        <el-tag>{{ scope.row.total }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="剩余数量" width="100">
      <template #default="scope">
        <el-tag>{{ scope.row.remaining }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="状态" width="100">
      <template #default="scope">
        <el-tag :type="scope.row.status === 0 ? 'success' : 'warning'">
          {{ getStatusName(scope.row.status) }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      v-model:current-page="searchObj.current"
      v-model:page-size="searchObj.limit"
      :page-sizes="[10, 20, 30, 50]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />

  <!-- 编辑对话框 -->
  <el-dialog v-model="editWinVisible" title="编辑座位信息" width="500">
    <el-form
        ref="editFormRef"
        :model="obj"
        label-width="100px"
    >
      <el-form-item label="ID" disabled>
        <el-input v-model="obj.id" autocomplete="off" />
      </el-form-item>
      <el-form-item label="赛事ID">
        <el-input v-model="obj.matchId" autocomplete="off" type="number"/>
      </el-form-item>
      <el-form-item label="座位类型">
        <el-input v-model="obj.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="价格">
        <el-input v-model="obj.price" autocomplete="off" type="number"/>
      </el-form-item>
      <el-form-item label="总数量">
        <el-input v-model="obj.total" autocomplete="off" type="number"/>
      </el-form-item>
      <el-form-item label="剩余数量">
        <el-input v-model="obj.remaining" autocomplete="off" type="number"/>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="obj.status" placeholder="请选择状态" style="width: 240px">
          <el-option label="正常" value="0" />
          <el-option label="禁用" value="1" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="editCancel">取消</el-button>
      <el-button type="primary" @click="editCommit">提交</el-button>
    </template>
  </el-dialog>

  <!-- 新增对话框 -->
  <el-dialog v-model="addWinVisible" title="新增座位信息" width="500">
    <el-form
        ref="addFormRef"
        :model="obj"
        label-width="100px"
    >
      <el-form-item label="赛事ID">
        <el-input v-model="obj.matchId" autocomplete="off" type="number"/>
      </el-form-item>
      <el-form-item label="座位类型">
        <el-input v-model="obj.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="价格">
        <el-input v-model="obj.price" autocomplete="off" type="number"/>
      </el-form-item>
      <el-form-item label="总数量">
        <el-input v-model="obj.total" autocomplete="off" type="number"/>
      </el-form-item>
      <el-form-item label="剩余数量">
        <el-input v-model="obj.remaining" autocomplete="off" type="number"/>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="obj.status" placeholder="请选择状态" style="width: 240px">
          <el-option label="正常" value="0" />
          <el-option label="禁用" value="1" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="addCancel">取消</el-button>
      <el-button type="primary" @click="addCommit">提交</el-button>
    </template>
  </el-dialog>
</template>

<style></style>